<template>
    <div class="content">
        <div class="header">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="用户名称">
                    <el-input v-model="searchForm.account" placeholder="请输入用户名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAccount">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" prop="account">

            </el-table-column>
            <el-table-column label="等级" prop="level">

            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    scope.$index: {{ scope.$index }}======scope.row{{ scope.row }}
                    <el-button size="small" @click="updateAccount(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹框内容 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" @close="resetAccountDialog">
            <el-form :model="accountForm" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input v-model="accountForm.account" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="等级">
                    <el-input v-model="accountForm.level" placeholder="请输入用户等级" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetAccountDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount" v-if="dialogType === dialogTypeMap.add">
                        确认
                    </el-button>
                    <el-button type="primary" @click="updateAccountHandle" v-else>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 引入请求的接口
import { getDataApi, deleteAccountApi, addAccountApi, updateAccountApi } from '../utils/mockServer/db.js'

import { ElMessage, ElMessageBox } from 'element-plus'


// 定义常量
const DEFAULTLEVEL = 1
const DIALOGTITLEMAP = {
    0:'新增',
    1:'修改'
}
// 定义搜索的表单对象
const searchForm = ref({
    account: ''
})

// 列表数据
const tableData = ref([])

// 弹框是否可见
const dialogVisible = ref(false)
// 弹框的类型Map
const dialogTypeMap = ref({
    add: 0,
    modify:1
})

// 当前的弹框, 默认为新增
const dialogType = ref(dialogTypeMap.value.add)
// 当前的弹框title
const dialogTitle = computed(()=>{
    return DIALOGTITLEMAP[dialogType.value]
})

// 定义新增弹框的form表单对象
const accountForm = ref({
    account: '',
    level: DEFAULTLEVEL,
    id:0
})


// 定义获取全部数据的方法，等待调用
const getData = (account) => {
    // 1. 调用接口，获取全部的数据
    // 2. 将得到的后台数据给到我们的列表数据
    tableData.value = getDataApi({ account })
}
// 调用获取全部数据
getData()

// 定义搜索的方法，并在方法中传入要搜索的内容，然后调用获取全部数据的方法 getData
const handleSearch = () => {
    // 获取全部的数据的方法
    getData(searchForm.value.account)
}


// 新增操作
const showAddAccount = () => {
    // 1. 显示弹框
    dialogVisible.value = true
    // 2. 切换当前的弹框为新增
    dialogType.value = dialogTypeMap.value.add
}

// 1. 引入新增接口
// 2. 定义一个新增方法，用来处理新增的接口逻辑
const addAccount = () => {
    // 3. 配置传递给新增接口的数据
    const { account, level } = accountForm.value
    const accountObj = {
        account,
        level
    }
    // 4. 调用新增接口
    addAccountApi(accountObj)
    
    // 5. 新增成功，提示用户
    ElMessage({
        type: 'success',
        message: '新增成功',
    })
    // 6. 请求列表
    handleSearch()
    // 7. 复位
    resetAccountDialog()
}

// 显示修改的弹框
const updateAccount = (row)=>{
    // 1. 显示弹框
    dialogVisible.value = true
    // 2. 将当前的弹框切换成修改弹框
    dialogType.value = dialogTypeMap.value.modify
    // 3. 将数据显示在弹框的表单内
    console.log('row',row);
    const {account,level,id} = row

    accountForm.value.account = account
    accountForm.value.level = level
    accountForm.value.id = id

}

// 修改的接口调用
const updateAccountHandle = ()=>{
    // 1. 准备给修改账号的接口的数据
    // 直接可以用accountForm
    // 2. 调用修改账号的接口
    updateAccountApi(accountForm.value)
    // 3. 提示成功
    ElMessage({
        type: 'success',
        message: '修改成功',
    })
    // 4. 请求列表
    handleSearch()
    // // 5. 复位
    resetAccountDialog()
}

// 1. 定义删除的方法,并绑定到按钮上
const deleteAccount = (row) => {
    console.log('row', row);
    // 2. 引入删除的接口
    // 3. 配置符合删除接口的数据
    // const deleteObj = {
    //     id: row.id
    // }

    // 4. 提示用户是否进行删除，是，调用删除接口。否，取消掉
    ElMessageBox.confirm(
        '是否要删除该账号',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用删除接口
            deleteAccountApi(row)
            // 5. 提示删除成功
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            // 6. 重新获取数据
            handleSearch()

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })

}

// 对弹框进行复位
const resetAccountDialog = () => {
    // 1. 弹框消失
    dialogVisible.value = false
    // 2. 弹框内的表单复位
    accountForm.value.account = ''
    accountForm.value.level = DEFAULTLEVEL
}


</script>

<style scoped>
.content {
    width: 1200px;
}

.header {
    display: flex;
    justify-content: space-between;
}
</style>